<template>
    <div id="jx-contain">
        <div class="jx-mainSection fl">
            <div class="jx-course-name-detail">
                <div class="jx-course-name" v-text="coursename"></div>
                <div class="jx-course-content" v-text="coursecontent"></div>
                <button class="button-style jx-course-manage-btn">课程管理</button>
            </div>
            <div class="jx-course-menu">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <div>
                                <div class="jx-title-box">
                                    <div class="fl jx-blueStreak"></div>
                                    <div class="fl jx-titleText">第一章  Spark 简介</div>
                                    <i class="header-icon el-icon-info"></i>
                                </div>
                                    <div class="jx-chapter-detail">
                                    课程包括线性代数、多元微积分和概率统计三部分，为大家深入学习大数据课程打下良好基
                                </div>
                            </div>
                        </template>
                        <div class="jx-chapter-info">·&ensp;实验手册<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info">·&ensp;学习视频<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info">·&ensp;开始实验<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info" @click="jumpLink('CourseResourceDetail')">·&ensp;教学资源<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info" @click="jumpLink('StuAttendance')">·&ensp;学生考勤<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info" @click="jumpLink('CourseMaterialDetail')">·&ensp;备课材料<div class="enter">进入 ></div></div>
                        <div class="jx-chapter-info" @click="jumpLink('CoursewareDetail')">·&ensp;理论学习<div class="enter">进入 ></div></div>
                    </el-collapse-item>
                </el-collapse>

            </div>
        </div>
        <div class="jx-sideSection fl">
            <div class="jx-sideOne">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">授课教师</div>
                </div>
                <div class="jx-info-box">
                    <img class="jx-teacherIcon fl" src="./../../../assets/images/login_bg.jpg" alt="">
                    <div class="jx-teacherName fl">教师名称</div>
                </div>
                <div class="jx-class-manage">
                    <div class="jx-class-name fl">当前教授班级XXXXXXXXXXX班</div>
                    <button class="button-style fl">管&ensp;理</button>
                </div>
            </div>
            <div class="jx-sideTwo">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">班级消息</div>
                </div>
                <div class="jx-class-chose">
                    <i>当前教授班级:</i>
                    <template>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                        <el-tooltip class="item" effect="dark" content="选择当前教授的班级，该课程模块下的功能默认按此检索。" placement="bottom">
                        <i  class="iconfont icon-wenti-m"></i>
                    </el-tooltip>
                </div>
                <div class="jx-class-detail">
                        <div>班级人数：<i>222人</i></div>
                        <div>未审批实验报告：<i>202人</i><button class="button-style ">批阅</button></div>
                        <div>未批改随堂练习：<i>202人</i><button class="button-style ">批阅</button></div>
                        <div>未批改试卷：<i>202人</i><button class="button-style ">批阅</button></div>
                </div>
                <div class="jx-button-box">
                    <button class="button-style jx-stu-attendance">学生考勤</button>
                    <button class="button-style jx-lab-control">实验手册显隐</button>
                </div>
            </div>
                <div class="jx-sideThree">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">你能学到什么</div>
                </div>
                <div class="jx-course-detail">本课程包括线性代数、多元微积分和概率统计三部分，为大家深入学习大数据课程打下良好基础。在线性代数中，我们着重介绍矢量、向量和矩阵以及它们之间的关系，特征值和特征向量的原理以及应用。在多元微积分部分，加强之后，将充分了解大数据学习所需要的数学知识。</div>
                <div class="jx-course-total">
                    本门课程共<i v-text="coursenum"></i>课时
                </div>
                <div class="gray-line"></div>
                <div class="jx-course-learned">已学习到  <i v-text="learned"></i></div>
                <div><button class="button-style jx-recent-study">最近学习</button></div>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            coursename:"R语言与大数据处理技术",
            coursecontent:"本课程包括线性代数、多元微积分和概率统计三部分，为大家深入学习大数据课程打下良好基础。在线性代数中，我们着重介绍矢量、向量和矩阵以及它们之间的关系，特征值和特征向量的原理以及应用。在多元微积分部分，加强大家对微积分的直观理解，内容包括斜坡、梯度、函数的近似值和线性回归模型等。在概率统计部分，主要包括随机变量和随机向量的数字特征、常见概率分布和贝叶斯定理。学生在学习完本课程之后，将充分了解大数据学习",
            coursenum:"11",
            learned:"第一章第2节  大数据概论",
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value: ''
        }
    },
    methods: {
        //跳转我的课件
        jumpLink(jumpData){
            let routeData = this.$router.resolve({
                name: jumpData
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>
<style scoped>
 .el-collapse-item>>>.el-collapse-item__header{
        height: 80px;
    }
    .el-collapse-item>>>.el-collapse-item__arrow{
         margin-top: -38px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    $sideWidth:380px;
    $mainWidth:800px;
    $bg_ff:$white;
    $fontBlue:$blue;
    $fontGray:$title-gray;
    #jx-contain{
        width: $width;
        height: auto;
        // overflow: hidden;
        margin: 0 auto;
        background: $bg_f8;
        min-height: 1080px;
         .jx-mainSection{
            width:$mainWidth;
            margin-right: 20px;
            height: auto;
            .jx-course-menu{
                box-shadow: $boxShadow;
                padding: 28px 33px 23px 0;
                .jx-chapter-detail{
                    font-size: $fs14;
                    padding-left: 40px;
                    color: $table-gray;
                }
                .enter{
                    color:$btn-blue;
                    font-size: 12px;
                    float: right;
                    cursor: pointer;
                }
                .jx-chapter-info{
                    padding-left: 40px;
                }
                .el-collapse{
                     .jx-title-box{
                        color:$fontBlue;
                        line-height: 15px;
                        text-align: left;
                        height: 15px;
                        font-size: $fs16;
                        .jx-blueStreak{
                            background: $fontBlue;
                            width: 2px;
                            float: left;
                            height: 15px;
                            padding: 0;
                        }
                        .jx-titleText{
                            padding-left:40px;
                            width: auto;
                        }
                    }

                }

            }
            .jx-course-name-detail{
                box-shadow: $boxShadow;
                padding: 28px 33px 23px 40px;
                margin-bottom: 20px;
                background: $white;
                .jx-course-name{
                    color: $fontBlue;
                    font-size: $fs16;
                    font-weight: bolder;
                    margin-bottom: 16px;
                }
                 .jx-course-content{
                    color: $table-gray;
                    font-size: $fs14;
                    line-height: $lh;
                    margin-bottom: 20px;
                }
            }
        }
        .jx-sideSection{
            width:$sideWidth;
            font-size:$fs16;
            div{
                width: 100%;
                background: $bg_ff;
            }
            .jx-sideThree{
                height: 412px;
                padding-top: 28px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                color: $table-gray;
                font-size: $fs14;
                .gray-line{
                    height: 1px;
                    width: 322px;
                    background: $grayLine;
                    margin: 0 0 14px 26px;
                }
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-course-detail{
                    padding: 22px 32px 0 26px;
                    margin-bottom: 28px;
                    width: auto;
                    line-height: $lh;
                }
                .jx-course-total,.jx-course-learned{
                    padding: 0 32px 0 26px;
                    width: auto;
                    line-height: $lh;
                    margin-bottom: 16px;
                }
                .jx-course-learned{
                    margin-bottom: 40px;
                }
                $button-width:280px;
                $button-height:50px;
                $button-size:16px;
                .jx-recent-study{
                    width:  $button-width;
                    height:$button-height;
                    line-height: $button-height;
                    font-size: $button-size;
                    margin: 0 auto;
                    display: block;
                }
            }
            .jx-sideOne{
                height: 212px;
                padding-top: 28px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-info-box{
                    height: 64px;
                    padding:0 0 38px 26px;
                    margin-top: 30px;
                    width: auto;
                     .jx-teacherIcon{
                        height: 64px;
                        width: 64px;
                        border-radius: $br50;
                    }
                    .jx-teacherName{
                        color: $fontGray;
                        font-size: $fs16;
                        width: auto;
                        height: 64px;
                        line-height: 64px;
                        padding-left: 20px;
                    }
                }
                .jx-class-manage{
                    .jx-class-name{
                        color: $fontBlue;
                        font-size:$fs16;
                        padding-left: $paddLeft;
                        width: 204px;
                        word-break: break-all;
                        margin-top: 8px;
                        margin-right: 35px;
                    }
                    $button-width:90px;
                    $button-height:32px;
                    .button-style{
                        width: $button-width;
                        height:$button-height;
                    }
                }
            }
            .jx-sideTwo{
                height: 317px;
                padding-top: 28px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-class-chose{
                    margin: 18px 0 30px 0;
                    padding-left: $paddLeft;
                    width: auto;
                    i{
                        font-size: $fs14;
                        color: $table-gray;
                        margin-right: 18px;
                    }
                    .el-select{
                        width: auto;
                        line-height: 38px;
                        margin-right: 16px;
                    }
                }
                .jx-class-detail{
                    padding-left: $paddLeft;
                    font-size: $fs14;
                    color:$title-gray;
                    margin-bottom: 32px;
                    width: auto;
                    div{
                        margin-bottom: 14px;
                    }
                    .button-style{
                        height: 22px;
                        line-height: 22px;
                        margin-left: 8px;
                    }
                }
                .jx-button-box{
                    padding-left: $paddLeft;
                    margin-bottom: 32px;
                    .jx-stu-attendance{
                        margin-right: 20px;
                    }
                }
                .icon-shujuduibi{
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    width: 16px;
                    border:none;
                }
            }

        }

    }

</style>
